<template>
	<div style="width: 100%;">
		<h1>工作任务单</h1>
	</div>
	<div class="main">
		<div class="job1">
			<h2>日常工作单</h2>
			 <!--  添加任务按钮 -->
			 <el-button type="primary" @click="add_dialog_visible = true" size="small" v-if="counter.role_id === 1 || counter.role_id === 2">添加任务</el-button>
			<!-- 任务单 -->
			<el-table 
				:data="list1"
				stripe 
				style="margin: 20px auto;"
				v-if="list1.length"
			>
				<!-- <el-table-column label="编号" prop="id"/> -->
				<el-table-column label="负责人" prop="job_people"/>
				<el-table-column label="内容" prop="job_content"/>
				<el-table-column label="截止日期" prop="job_last_date"/>
				<el-table-column label="是否为重要任务" prop="job_important"/> 
				<el-table-column label="是否需要延期" prop="job_delay"/>
				<el-table-column label="延期原因" prop="job_delay_reason"/>
				<el-table-column align="right" label="操作" width="200px">
					<template #default="scope">
					<el-button 
						size="small" 
						@click="handleEdit(scope.$index, scope.row)"
					>
						编辑
					</el-button>
					<el-button
						v-if="counter.role_id === 1 || counter.role_id === 2"
						size="small" 
						type="danger"
						@click="handleDelete(scope.$index, scope.row)"
					>
						删除
					</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-empty description="no-job" v-if="!list1.length"/>

			<!-- 添加任务页面 -->
			<el-dialog
				title="添加任务"
				v-model="add_dialog_visible"
				width="30%"
			>
				<el-form
					ref="ruleFormRef"
					:model="job_form"
					status-icon
					label-width="120px"
					class="demo-ruleForm"
				>
					<el-form-item label="负责人" prop="job_people">
						<el-input v-model="job_form.job_people" autocomplete="off"/>
					</el-form-item>
					<el-form-item label="任务" prop="job_content">
						<el-input v-model="job_form.job_content" autocomplete="off"/>
					</el-form-item>
					<el-form-item label="截止日期" prop="job_last_date">
						<el-input v-model="job_form.job_last_date" autocomplete="off"/>
					</el-form-item>
					<el-form-item label="是否为重要任务" prop="job_important">
						<el-input v-model="job_form.job_important" autocomplete="off"/>
					</el-form-item>
					<el-form-item label="是否需要延期" prop="job_delay">
						<el-input v-model="job_form.job_delay" autocomplete="off"/>
					</el-form-item>
					<el-form-item label="延期原因" prop="job_delay_reason">
						<el-input v-model="job_form.job_delay_reason" autocomplete="off"/>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
						<el-button @click="resetForm(ruleFormRef)">重置</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
			<!-- 编辑任务页面 -->
			<el-dialog
				title="编辑任务"
				v-model="edit_dialog_visible"
				width="30%"
			>
				<el-form
					ref="editFormRef"
					:model="job_form"
					status-icon
					label-width="120px"
					class="demo-ruleForm"
				>
				<!-- <el-form-item label="编号" prop="id">
					<el-input v-model="job_form.id" autocomplete="off"/>
				</el-form-item> -->
				<el-form-item label="负责人" prop="job_people">
					<el-input v-model="job_form.job_people" autocomplete="off"/>
				</el-form-item>
				<el-form-item label="任务" prop="job_content">
					<el-input v-model="job_form.job_content" autocomplete="off"/>
				</el-form-item>
				<el-form-item label="截止日期" prop="job_last_date">
					<el-input v-model="job_form.job_last_date" autocomplete="off"/>
				</el-form-item>
				<el-form-item label="是否为重要任务" prop="job_important">
					<el-input v-model="job_form.job_important" autocomplete="off"/>
				</el-form-item>
				<el-form-item label="是否需要延期" prop="job_delay">
					<el-input v-model="job_form.job_delay" autocomplete="off"/>
				</el-form-item>
				<el-form-item label="延期原因" prop="job_delay_reason">
					<el-input v-model="job_form.job_delay_reason" autocomplete="off"/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitEditForm(editFormRef)">提交</el-button>
					<el-button @click="resetForm(editFormRef)">重置</el-button>
				</el-form-item>
				</el-form>
			</el-dialog>
		</div>
		
		<hr>

		<div class="job2">
			<h2>紧急工作单</h2>
			<ul v-for="item in list2">
				<li>{{ item }}</li>
			</ul>
		</div>
	</div>
</template>
 
<script setup name="">
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
import {ElMessageBox} from 'element-plus'
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
	
	const list1 = reactive([])
	const getJobs = () =>{
		const token = sessionStorage.getItem('token')
		axios.get("http://127.0.0.1:5000/jobs", {
			headers: {
				Authorization: `Bearer ${token}`
			}
		}).then(res => {
			list1.splice(0,list1.length)
			list1.push(...res.data.results)
			console.log(res.data.results);
		})
	}

	onMounted(()=>{
		getJobs()
	})

	// 编辑表单
	let edit_dialog_visible = ref(false)
	const handleEdit = (index, row) => {
		for(let key in row) {
			job_form[key] = row[key]
		}
		edit_dialog_visible.value = true
	}

	// 添加表单
	let add_dialog_visible = ref(false)

	
	// 删除表单
	const handleDelete = (index, row) => {
		console.log(row.id);
		const token = sessionStorage.getItem('token')
		axios.delete(`http://localhost:5000/jobs/${row.id}`, {
			headers: {
				Authorization: `Bearer ${token}`
			}
		}).then(() => {
			getJobs()
		})
	}

	let list2 = [1,2,3]
	const ruleFormRef = ref()
	const editFormRef = ref()
	const job_form = reactive({
		id: "",
		job_people: "",
		job_content: "",
		job_last_date: "",
		job_important: "",
		job_delay: "",
		job_delay_reason: "",
	})

	// const handleClose = (done) => {
  	// 	ElMessageBox.confirm('确认关闭？')
    //   		.then(() => {
	// 			done();
	// 		})
	// 		.catch(() => {
	// 		});
	// }

	const submitEditForm = (formEl) => {
		const token = sessionStorage.getItem('token')
		axios.put(`http://localhost:5000/jobs/${job_form.id}`, job_form, {
			headers: {
				Authorization: `Bearer ${token}`
			}
		}).then((res) => {
			formEl.resetFields()
			edit_dialog_visible.value = false
			getJobs()
		})
	}

	const submitForm = (formEl) => {
		const token = sessionStorage.getItem('token')
		axios.post('http://localhost:5000/jobs', job_form, {
			headers: {
				Authorization: `Bearer ${token}`
			}
		}).then(() => {
			add_dialog_visible.value = false
			formEl.resetFields()
			getJobs()
		})
	}
	// 重置表单
	const resetForm = (formEl) => {
		formEl.resetFields()
	}
</script>
 
<style scoped>
h1{
	display: block;
	width: 50%;
	margin: 0,auto;
}
/* .job1{
	float: left;
	width: 50%;
}
.job2{
	float: left;
	width: 50%;
} */
</style>